<!-- 巡检 -->
<template>
  <div>
    <van-search
      @search="inputSearch"
      v-model="searchVal"
      placeholder="请输入搜索关键词"
    />
    <div class="line"></div>
    <van-tabs v-model="active">
      <van-tab title="巡检任务">
        <div v-if="dataList.length !== 0">
          <div class="facility" v-for="(item, i) of dataList" :key="i">
            <div class="message">
              <div>{{ item.processVariables.itemName }}</div>
              <div style="font-size: 12px; margin-top: 10px">
                {{ item.name }} &nbsp;&nbsp;&nbsp;
                {{ item.processVariables.rule }} &nbsp;&nbsp;&nbsp;{{
                  item.processVariables.ownerName
                }}
              </div>
            </div>
            <van-button @click="look(item)"> 查看 </van-button>
          </div>
        </div>
        <div class="tipMsg" v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Search, Divider, Button, ActionSheet } from 'vant'
import { task, getDefinition, getAvueForm } from '@/api/index'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [{ name: '保修' }, { name: '设备台账' }],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      list: [],
      totalCount: [],
      dataList: [],
      facilityItem: {},
      facilityId: ''
    }
  },
  mounted () {
    this.getDataList('inspection', '')
  },
  computed: {},
  async created () {
    /*    const data = {
      processDefinitionKey: 'inspection',
      tenantId: window.localStorage.getItem('tenantId')
    }
    const { list, totalCount } = await task(data)
    this.list = list
    this.totalCount = totalCount */
  },
  methods: {
    inputSearch (val) {
      this.getDataList('inspection', val)
    },
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '保修':
          this.$router.push('/standingBook-guarantee')
          break
        case '设备台账':
          this.$router.push('/standingBook-detail')
          break
      }
    },
    look (item) {
      this.facilityItem = item
      this.facilityId = item.id
      this.$router.push({
        path: '/form',
        query: {
          params:
            // 'inspection' +
            item.processDetail.CATEGORY_ +
            ',' +
            item.processInstanceId +
            ',' +
            item.taskDefinitionKey +
            ',' +
            item.id +
            ',' +
            '0' +
            ',' +
            'h5' +
            ',' +
            item.processDefinitionId
          // +'type,processId,id,isDetail'
        }
      })
      // this.getDefinition()
      // this.$router.push('/polling-detail')
    },
    // 获取数据列表
    async getDataList (processDefinitionKey, name = '') {
      var conditionKeyLike = ['owner']
      var conditionValueLike = [window.localStorage.getItem('personId')]
      if (name) {
        conditionKeyLike.push('name')
        conditionValueLike.push(name)
      }
      const params = {
        // taskNameList: '巡更打卡',
        // processDefinitionKey: '',
        processCategory: 'inspection',
        withProcessDetail: 1,
        withVariables: 1,
        page: 1,
        size: 400,
        type: '检查',
        tenantId: window.localStorage.getItem('tenantId'),
        conditionKeyLike: conditionKeyLike.join(','),
        conditionValueLike: conditionValueLike.join(',')
      }
      try {
        const res = await task(params)
        this.dataList = res.list
        console.log(res)
        if (this.searchVal !== '') {
          this.searchVal = ''
        }
      } catch (error) {}
    },
    async getDefinition () {
      // const fourarr = ['repair', 'maintain', 'patrol', 'inspection']
      // const fourarrHtml = [
      //   'repairForm',
      //   'maintainForm',
      //   'patrolForm',
      //   'inspectionForm'
      // ]
      const data1 = {
        definitionKey: 'inspection',
        tenantId: window.localStorage.getItem('tenantId'),
        isNewest: true
      }
      const definition = await getDefinition(data1) // 定义流程
      const arr = definition.list[0]
      const data2 = {
        processId: arr.id,
        taskId: this.facilityId,
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc'
      }
      const form = await getAvueForm(data2) // 表单
      const { detail } = form
      // 跳转到对应页面
      this.$router.push({
        path: '/pollingForm',
        query: {
          formData: this.facilityItem.processVariables,
          config: detail
        }
      })
      if (Array.isArray(form) && form.length === 0) {
        alert('字段为空')
      }
    }
  },
  watch () {}
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.tipMsg {
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 20px;
  color: grey;
  text-align: center;
}
</style>
